import urlHook from "@page/common/utils/urlHook";
import Rest from "@module/Rest";
import EventApi from "@module/EventApi";
import ZenUI from "@root/components/ZenUI/ZenUI";
import ProtocolTag  from '@page/common/comps/ProtocolTag'
import Uts from "@module/Uts";
import showLoginModal from "@root/P/pages/LoginModal/showLoginModal"

export default class PriceSection extends React.Component {
    constructor() {
        super();
        const suppId=$state.params&&$state.params.suppId;
        const isSuppSelf=Uts.getCookie('suppId')==suppId;
        this.isSuppSelf=isSuppSelf
        this.state = {
            activities: null,
            groupBuyingInfo: null,
        };
        if ($state.params.groupProductId) {
            this.getGroupBuyingInfo($state.params.groupProductId);
        }
    }

    componentDidMount() {
        let url = `/store/api/product/getProductActivityInfo`;
        const { productId } = (this.props && this.props) || $state.params;
        let params = {
            sn: productId || $state.params.id
        };
        Rest.post(url, params)
            .then(res => {
                console.log(res);
                if (res.code == "0000") {
                    this.setState({
                        activities: res.productActivityModel
                    });
                }
            })
            .catch(err => {
                console.log(err);
            });
    }

    render() {
        const { product, message } = this.props;
        const {
            price,
            floorPrice,
            negotiatedPrice,
            showOriginalPrice,
            productInGroupBuyingModel,
            protocol
        } = product;
        const { activities, groupBuyingInfo } = this.state;


        if (!global.hasLogin&& !this.isSuppSelf) {
            return (
                <div className={"detail-top-detail-prices-box"}>
                    <div className={"detail-top-detail-price"}>
                        <p className={"detail-top-detail-price-title"}>
                            价格：
                        </p>
                        <p
                            onClick={()=>{
                                showLoginModal(false,true)
                            }}
                            className={"detail-top-detail-price-nologin"}>
                            {global.isSupp? "单位登录可见":"登录可见"}
                        </p>
                    </div>
                </div>
            );
        }
        if (groupBuyingInfo) {
            const {
                price,
                unifyPrice,
                staircasePriceModels,
                groupBuyingEndTime,
                groupBuyingDescribe
            } = groupBuyingInfo;

            // 0: {level: 1, minAmount: 0, maxAmount: 10, price: 11, maxLevel: false, minLevel: true}
            // 1: {level: 2, minAmount: 10, maxAmount: 20, price: 10, maxLevel: false, minLevel: false}
            // 2: {level: 3, minAmount: 20, maxAmount: 0, price: 9, maxLevel: true, minLevel: false}
            return (
                <div>
                    <div className={"detail-top-detail-prices-box2"}>
                        <div className={"detail-top-detail-price"}>
                            <p className={"detail-top-detail-price-title2"}>
                                价格：
                            </p>
                            <p
                                className={"detail-top-detail-price-txt"}
                                style={{ marginLeft: 20 }}
                            >
                                ¥{unifyPrice.toFixed(2)}
                            </p>
                        </div>
                        <div className={"detail-top-detail-price"}>
                            <p className={"detail-top-detail-price-title2"}>
                                团购价：
                            </p>
                            <p className={"detail-top-detail-tejia-txt"}>
                                ¥{price.toFixed(2)}
                            </p>
                            <div
                                className={"detail-top-detail-tejia-band3"}
                                style={{ marginLeft: 10 }}
                            >
                                <p className={"detail-top-detail-tejia-band-p"}>
                                    团购
                                </p>
                            </div>
                            {protocol == "1" && <ProtocolTag />}
                        </div>
                        <div style={{ display: "flex", marginTop: 10 }}>
                            <p
                                className={"detail-top-detail-price-title2"}
                                style={{ marginTop: 5 }}
                            >
                                阶梯价:
                            </p>
                            <div>
                                {staircasePriceModels &&
                                    staircasePriceModels.map((item, index) => {
                                        const { price } = item;
                                        return (
                                            <div
                                                key={index}
                                                style={{
                                                    display: "flex",
                                                    color:
                                                        "rgba(100, 100, 100, 1)",
                                                    fontSize: 15,
                                                    marginLeft: 10,
                                                    lineHeight: 1.8
                                                }}
                                            >
                                                <CountLevel item={item} />
                                                <div
                                                    style={{
                                                        marginLeft: 15,
                                                        color: "#f5222d"
                                                    }}
                                                >
                                                    <span>{"￥"}</span>
                                                    <span>
                                                        {price.toFixed(2)}
                                                    </span>
                                                </div>
                                            </div>
                                        );
                                    })}
                            </div>
                        </div>
                        {message && (
                            <div className="zen_h-32 zen_l-h-32">
                                <span
                                    className={"detail-top-detail-price-title"}
                                >
                                    当前活动：
                                </span>

                                {
                                    <span className="zen_m-l-5 zen_fs-14 zen_FF9641">
                                        {message}
                                    </span>
                                }
                            </div>
                        )}
                    </div>

                    <div
                        style={{
                            backgroundColor: "#fff",
                            marginTop: 10,
                            paddingLeft: 10
                        }}
                    >
                        <div
                            style={{
                                display: "flex",
                                lineHeight: 1.5,
                                marginTop: 6
                            }}
                        >
                            <p className={"detail-top-detail-price-title"}>
                                有效期：截止时间为
                            </p>
                            <p
                                className={"detail-top-detail-price-title"}
                                style={{ fontSize: 14 }}
                            >
                                {groupBuyingEndTime}
                            </p>
                        </div>
                        {groupBuyingDescribe && (
                            <div style={{ display: "flex", lineHeight: 1.5 }}>
                                <p className={"detail-top-detail-price-title"}>
                                    说明：
                                </p>
                                <p className={"detail-top-detail-price-title"}>
                                    {groupBuyingDescribe}
                                </p>
                            </div>
                        )}
                        <div className={"detail-top-detail-groupbuy-line"} />
                    </div>
                </div>
            );
        }

        if (activities) {
            return (
                <div className={"detail-top-detail-prices-box"}>
                    <div className={"detail-top-detail-price"}>
                        <p className={"detail-top-detail-price-title"}>
                            价格：
                        </p>
                        <p className={"detail-top-detail-price-txt"}>
                            ¥{activities.price.toFixed(2)}
                        </p>
                    </div>

                    <div className={"detail-top-detail-tejia"}>
                        <p className={"detail-top-detail-price-title"}>
                            {activities.negotiatedPrice
                                ? "低价推荐："
                                : "限时价"}
                        </p>
                        <p className={"detail-top-detail-tejia-txt"}>
                            ¥{activities.promotionPrice.toFixed(2)}
                        </p>
                        {
                            <div className={"detail-top-detail-tejia-band4"}>
                                <p className={"detail-top-detail-tejia-band-p"}>
                                    {activities.negotiatedPrice
                                        ? "低价推荐"
                                        : "限时折扣"}
                                </p>
                            </div>
                        }
                    </div>
                    {this.renderGroupBuying(productInGroupBuyingModel)}
                </div>
            );
        }

        return (
            <div className={"detail-top-detail-prices-box"}>
                <div className={"detail-top-detail-tejia"}>
                    <p className={"detail-top-detail-price-title"}>价格：</p>
                    <p className={"detail-top-detail-tejia-txt"}>
                        ¥{price.toFixed(2)}
                    </p>
                    {floorPrice && (
                        <div className={"detail-top-detail-tejia-band1"}>
                            <p className={"detail-top-detail-tejia-band-p"}>
                                冰点价
                            </p>
                        </div>
                    )}
                    {protocol == "1" && <ProtocolTag />}
                </div>
                {message && !groupBuyingInfo && (
                    <div className="zen_h-32 zen_l-h-32">
                        <span className={"detail-top-detail-price-title"}>
                            当前活动：
                        </span>

                        {
                            <span className="zen_m-l-5 zen_fs-14 zen_FF9641">
                                {message}
                            </span>
                        }
                    </div>
                )}
                {this.renderGroupBuying(productInGroupBuyingModel)}
            </div>
        );
    }

    renderGroupBuying(productInGroupBuyingModel) {
        const { productId, message } = this.props;
        if (
            productInGroupBuyingModel &&
            productInGroupBuyingModel.groupbuyingFlag
        ) {
            return this.getGroupBuyingInfo(
                productInGroupBuyingModel.groupbuyingId
            );
            /*return (
                <div className={"detail-top-detail-tuangou"}>
                    <p className={"detail-top-detail-price-title"}>
                        当前活动：
                    </p>
                    {productInGroupBuyingModel &&
                        productInGroupBuyingModel.groupbuyingFlag && (
                            <div
                                onClick={() => {
                                    this.getGroupBuyingInfo(
                                        productInGroupBuyingModel.groupbuyingId
                                    );
                                    // window.location.href=urlHook.groupBuying(productInGroupBuyingModel.groupbuyingId,productId)
                                }}
                                className={"detail-top-detail-tuangou-txt"}
                            >
                                <p>团购</p>
                            </div>
                        )}
                    {message && (
                        <span className="zen_m-l-5 zen_fs-14 zen_FF9641">
                            {message}
                        </span>
                    )}
                </div>
            );*/
        }
    }

    getGroupBuyingInfo(groupbuyingId) {
        const { productId } = (this.props && this.props) || $state.params;
        let url = `/store/api/groupbuying/product`;
        let params = {
            groupBuyingId: groupbuyingId,
            productId: productId
        };
        ZenUI.SL(10, "正在获取团购价格...");
        Rest.post(url, params)
            .then(res => {
                ZenUI.HL();
                console.log(res);
                if (res.code == "0000") {
                    this.setState(
                        {
                            groupBuyingInfo: res.productModel
                        },
                        () => {
                            EventApi.emit("showGroupBuyingBtn", {
                                groupbuyingId,
                                groupBuyingInfo: res.productModel
                            });
                        }
                    );
                }
            })
            .catch(err => {
                ZenUI.HL();
                console.log(err);
            });
    }
}

class CountLevel extends React.Component {
    render() {
        const { item } = this.props;
        const { minAmount, maxAmount, price, minLevel, maxLevel } = item;
        if (minLevel) {
            return (
                <div style={{ width: 50 }}>
                    <span>{"≤"}</span>
                    <span>{maxAmount}</span>
                </div>
            );
        } else if (maxLevel) {
            return (
                <div style={{ width: 50 }}>
                    <span>{">"}</span>
                    <span>{minAmount}</span>
                </div>
            );
        }
        return (
            <div style={{ width: 50 }}>
                <span>{minAmount + 1}</span>
                <span>-</span>
                <span>{maxAmount}</span>
            </div>
        );
    }
}
